
Vue.component('co-header',{
	data:function(){
		return{}
	},
	template:`<div class="cl-header container-fluid">
    <div class="header-content container">
        <nav class="navbar navbar-expand-lg navbar-light">
            <a class="navbar-brand" href="calmlog-index.html">
                <img src="img/logo.jpg" width="144" height="72" alt="">
            </a>
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                <span class="navbar-toggler-icon"></span>
            </button>
            <div class="collapse navbar-collapse justify-content-end" id="navbarNav">
                <ul class="navbar-nav">
                    <li class="nav-item active">
                        <a class="nav-link" href="calmlog-index.html">首页 <span class="sr-only">(current)</span></a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">教程</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">模板</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">日记</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">关于</a>
                    </li>
                </ul>
            </div>
        </nav>
    </div>
</div>

`
})
Vue.component('co-container',{
	data:function(){
		return{}
	},
	template:`
	<div class="cl-cantainer container">
    <div class="row">
       <co-fenye></co-fenye>
        <co-right></co-right>
    </div>
</div>
`
})
Vue.component('co-right',{
	data:function(){
		return{}
	},
	template:`<div class="col-md-3 cl-right">
            <div class="right-card">

                <div class="right-card-main">
                    <div class="right-card-title">个人微信号</div>
                    <div class="cl-code">
                        <img src="temporary-img/code.jpg" class="img-fluid" alt="">
                        <p>关注作者获取更多模板信息，定时发布干货文章</p>
                    </div>

                </div>
            </div>
        </div>`
})
Vue.component('co-footer',{
	data:function(){
		return{}
	},
	template:`<div class="container-fluid cl-footer">
    <div class="container">
        <p class="cl-copyright">本设计由简.工作室荣誉出品</p>
        <p class="cl-copyright">copyright @ 2017~2018 简.工作室（www.jeanstudio.cn）</p>
    </div>
</div>`
})
Vue.component('co-fenye',{
	data:function(){
		return{
			  articleList: [],
			  catagory:[],
			  page: 1,
			  page_size: 3,
			  total: 0
		}
	},
	created: function () { // 表示的时候vue初始化会执行这个方法。
	            let _this = this;
	            axios.get('http://localhost:8901/api/category/list')
	                .then(function (response) {
	                    if (response.data.status == 0) { // 服务端成功处理
	                        _this.categoryList = response.data.data.categoryList;
	                    } else {
	                        alert("获取分类列表失败，具体信息：" + response.data.message);
	                    }
	                })
	                .catch(function (error) {
	                    console.log(error);
	                });
	
	            this.getArticleList(this.page);
	        },
			methods: {
	            getArticleList: function (page) {
	                let _this = this;
	
	                axios.get('http://localhost:8901/api/article/list', {
	                    params: {
	                        page: page,
	                        page_size: _this.page_size
	                    }
	                })
	                    .then(function (response) {
	                        if (response.data.status == 0) { // 服务端成功处理
	                            _this.page = page;
	                            _this.articleList = response.data.data.articleList;
	                            _this.total =  response.data.data.total;
	                        } else {
	                            alert("获取文章列表失败，具体信息：" + response.data.message);
	                        }
	                    })
	                    .catch(function (error) {
	                        console.log(error);
	                    });
	            }
	        },
	        watch: {
	            page: function (newValue, oldValue) {
	                this.getArticleList(this.page);
	            }
	        },
	        computed: {
	            paginator: function () {
	                //  当前页，  每页显示几条记录， 总条目数
	                let result = {
	                    range: 2, // 页码每边显示几条
	                    page: this.page, //  当前页
	                    page_size: this.page_size, // 每页显示几条记录
	                    total: this.total, // 总条目数
	                    pages: [] // 要显示的页码列表
	                };
	                result.count = result.range * 2 + 1; // 总的显示的分页数
	                result.totalPage = Math.ceil(result.total / result.page_size); // 总页码数
	
	                let temp = result.totalPage - result.page;
	                let start = Math.max(1, (temp < 2) ? (result.page - (result.count - 1) + temp) : result.page - 2);
	                let end = Math.min(result.page + (result.count - 1), result.totalPage);
	                for (let i = start; i <= end; i++) {
	                    result.pages.push(i);
	                    if (result.pages.length >= result.count) {
	                        break;
	                    }
	                }
	                console.log(result);
	
	                return result;
	            }
	        },
	template:` 
	<div class="col-md-9 cl-left">
	
	    <div class="cl-card" v-for="item in articleList">
	        <div class="row">
	            <div class="col-lg-3 col-md-4 col-sm-12 cl-card-image" v-if="item.cover_image">
	                <a href="calmlog-details.html">
	                    <img v-bind:src="item.cover_image" class="img-fluid" alt="">
	                </a>
	            </div>
	            <div class="col-lg-9 col-md-8 col-sm-12 cl-card-main">
	                <h3 class="cl-card-main-title">
	                    <a :href="'http://127.0.0.1:8848/ui/calmlog-details.html?article_id='+item.article_id+'/'">
	                        {{ item.article_title }}
	                    </a>
	                </h3>
	                <p class="cl-card-main-info">{{ item.intro }}</p>
	                <p class="cl-card-more">
	                    <a :href="'http://127.0.0.1:8848/ui/calmlog-details.html?article_id='+item.article_id+'/'">
	                        阅读更多...
	                    </a>
	                </p>
	            </div>
	        </div>
	    </div>
	  <nav aria-label="Page navigation example">
	                         <ul class="pagination justify-content-center">
	                             <li class="page-item" :class="{disabled: paginator.page==1}">
	                                 <a class="page-link"
	                                    aria-label="Previous"
	                                    :href="'#page='+(paginator.page-1)"
	                                    @click="getArticleList(paginator.page-1)"
	                                 >
	                                     <span aria-hidden="true">&laquo;</span>
	                                     <span class="sr-only">Previous</span>
	                                 </a>
	                             </li>
	         
	                             <li v-for="item in paginator.pages"
	                                 class="page-item"
	                                 :class="{active:paginator.page==item}"
	                                 @click="getArticleList(item)"
	                             ><a class="page-link" :href="'#page='+item">{{ item }}</a>
	                             </li>
	         
	                             <li class="page-item" :class="{disabled: paginator.page==paginator.totalPage}">
	                                 <a class="page-link" :href="'#page='+(paginator.page+1)" aria-label="Next"
	                                    @click="getArticleList(paginator.page+1)"
	                                 >
	                                     <span aria-hidden="true">&raquo;</span>
	                                     <span class="sr-only">Next</span>
	                                 </a>
	                             </li>
	                         </ul>
	                     </nav>
	</div>`
})
Vue.component('co-list',{
	data:function(){
		return{
			//articleId异步请求怎么获取?
		}
	},created: function () { // 表示的时候vue初始化会执行这个方法。
            axios.get('http://localhost:8901/api/article/detail/article_id/' + articleId)
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.article = response.data.data.article;
                    } else {
                        alert("获取文章失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/api/category/list')
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.categoryList = response.data.data.categoryList;
                    } else {
                        alert("获取分类列表失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });

            axios.get('/api/comment/list/?article_id=' + articleId)
                .then(function (response) {
                    if (response.data.status == 0) { // 服务端成功处理
                        app.commentList = response.data.data.commentList;
                    } else {
                        alert("获取评论失败，具体信息：" + response.data.message);
                    }
                })
                .catch(function (error) {
                    console.log(error);
                });
        },
        methods: {
            addComment: function () {
                let _this = this;

                let params = new URLSearchParams();
                for (let i in _this.newComment) {
                    params.append(i, _this.newComment[i]);
                }
                axios.post("/api/comment/add/", params)
                    .then(function (response) {
                        console.log(response);
                        if (response.data.status == 0) { // 服务端成功处理
                            _this.commentList.unshift(response.data.data.comment);
                            _this.newComment = _this.newCommentTpl;
                        } else {
                            alert("增加评论失败，具体信息：" + response.data.message);
                        }
                    }).catch(function (error) {
                    console.log(error);
                });
            }
        },
        watch: {
            'newComment.comment_content': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 2 || newValue.length > 500)) {
                    this.tips = "评论内容长度在2~500之间。";
                } else {
                    this.tips = "";
                }
            },
            'newComment.email': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 3 || newValue.length > 100)) {
                    this.tips = "邮箱长度在3~100之间。";
                } else {
                    this.tips = "";
                }
            },
            'newComment.nickname': function (newValue, oldValue) {
                if (newValue.length != 0 && (newValue.length < 1 || newValue.length > 20)) {
                    this.tips = "昵称长度在1~20之间。";
                } else {
                    this.tips = "";
                }
            }
        },
        computed: {
            commentLength: function () {
                return this.commentList.length;
            }
        },
        filters: {
            formatTime: function (time) { //
                let date = new Date(time * 1000);
                let year = date.getFullYear();
                let month = (date.getMonth() + 1).toString().padStart(2, '0');
                let day = date.getDate().toString().padStart(2, '0');
                let hour = date.getHours().toString().padStart(2, '0');
                let minute = date.getMinutes().toString().padStart(2, '0');
                let second = date.getSeconds().toString().padStart(2, '0');
                return year + "-" + month + "-" + day + " " + hour + ":" + minute + ":" + second;
            }
        },
	template:`
	<div class="cl-cantainer container">
	    <div class="row">
	        <div class="col-md-9 cl-left">
	                <div class="cl-artical-content">
	                    <h2 class="cl-artical-title">{{ article.article_title }}</h2>
	                    <div class="cl-card-tag">
	                        <div><span>{{ commentLength }}</span>人评论 /
	                            发布时间：<span>{{ article.add_time | formatTime }}</span>
	                        </div>
	                    </div>
	                    <div class="cl-artical" v-html="article.content"></div>
	                </div>
	        
	                <div id="comment" class="comment">
	                    <form class="cl-comment-from">
	                        <input type="hidden" id="article_id" v-model="newComment.article_id"/>
	                        <div><textarea id="comment_content" placeholder="说点什么吧..." rows="2"
	                                       v-model.lazy="newComment.comment_content"></textarea></div>
	                        <input id="email" type="text" placeholder="邮箱" v-model.lazy="newComment.email"/>
	                        <input id="nickname" type="text" placeholder="昵称" v-model.lazy="newComment.nickname"/>
	                        <button type="button" id="comment-btn" @click="addComment()">留言</button>
	                        <span class="clearfix"></span>
	                        <span style="color: red; padding: 5px 5px;">{{ tips }}</span>
	                    </form>
	        
	                    <h4 class="right-card-title" id="right-card-title">全部评论</h4>
	        
	                    <div class="comment-panel" v-for="item in commentList">
	                        <div class="comment-panel-portrait">
	                            <img src="/img/portrait.png" class="img-fluid rounded-circle" alt="">
	                        </div>
	                        <div class="comment-panel-content">
	                            <div class="comment-panel-content-item">
	                                <div class="comment-author">{{ item.nickname }}</div>
	                                <div>{{ item.add_time | formatTime }}</div>
	                            </div>
	                            <div class="comment-panel-content-main">{{ item.comment_content }}</div>
	                        </div>
	                        <span class="clearfix"></span>
	                        <div class="text-primary"><a href="">回复</a></div>
	                    </div>
	        
	                </div>
	        
	            </div>
	        <co-right></co-right>
	    </div>
	</div>
`
})
let app= new Vue({
	el:"#app",
	data:{
		
	}
})